<template>
  <div>
   
    <el-input v-model='sendsms'></el-input>
  <el-button @click='send'>submit</el-button>
  聊天内容展示：
  <ul>
    <li v-for='i in meslist'>{{i}}</li>
  </ul>
  </div>
  
</template>

<script>
export default {
  data(){
    return{
       msg:'',
       ws:'',
       name:'',
       id:localStorage.getItem('id'),
       sendsms:'',
       meslist:[],

    }
  },
  methods:{
    initwebsocket(){
            this.id = this.$route.query.id,
            this.name = '用户'+this.id
            // payurl?pay='+this.pay+'&userid='+localStorage.getItem('userid')+'&pwd='+this.pwd
            this.ws = new WebSocket("ws://localhost:8000/wk?id="+this.id+"&name="+this.name)
            this.ws.onopen = function(){
                alert('success')
            }
            this.ws.onmessage=(msg)=>{
                var mes= JSON.parse(msg.data)
                this.meslist.push(mes['mes'])
                // this.userlist=mes['userlist']

            }
            this.ws.onclose=function(){
                alert('close')
            }
        },
        send(){
          var mes = this.name+'说'+this.sendsms
          this.meslist.push(mes)
          var sendmes = JSON.stringify({'id':'kefu','mes':mes})
            this.ws.send(sendmes)
        }
  },
  mounted(){
    this.initwebsocket()
  }

}
</script>

<style>

</style>